import QtQuick 2.10

Item {
    id: myPathAnim
    anchors.fill: parent

    property int dir: 1
    property alias targetX: test.x
    property alias targetY: test.y

    property real g_radius: 50
    property real dx: 0
    property real dy: 0

    Item{
        id: node
        width: 100
        height: 100

        Rectangle{
            id: test
            width: 10
            height: 10
            color: "white"
            radius: 0
            visible: displayCanvas
        }

        PathAnimation {
            id: pathAnim
            target: test
            running: true
            loops: Animation.Infinite
            duration: 2000
            path: Path {
                startX: dx+50; startY: dy

                PathCubic {
                    x: dx+50; y: dy+140
                    control1X: dx+50-70; control1Y: dy-10
                    control2X: dx+50-70; control2Y: dy+140+10
                }

                PathCubic {
                    x: dx+50; y: dy
                    control2X: dx+50+70; control2Y: dy-10
                    control1X: dx+50+70; control1Y: dy+140+10
                }

                onChanged: {
                    if(displayCanvas)
                        canvas.requestPaint()
                }
            }
        }

    }


    Canvas {
        id: canvas
        antialiasing: true
        anchors.fill: parent
        visible: displayCanvas

        onPaint: {
            var context = canvas.getContext("2d")
            context.clearRect(0, 0, width, height)
            context.strokeStyle = "red"
            context.path = pathAnim.path
            context.stroke()
        }
    }
}
